<template>
	<view class="index1_block" @click="handeleDetail(item)">
		<!-- 状态戳 -->

		<!-- 订单已失效 -->
		<template v-if="item.release_order.status == 3||item.release_order.is_deleted>0">
			<image src="/static/status/order_cancel.png" v-if="lang=='zh'" class="status-mask" mode="widthFix"></image>
			<image src="/static/status/order_cancel_ru.png" v-if="lang=='ru'" class="status-mask" mode="widthFix">
			</image>
		</template>

		<!-- 已中标 -->
		<template v-else-if="item.release_order.join_user_id != null && item.release_order.join_user_id == user_id">
			<image src="/static/status/order_start.png" v-if="lang=='zh'" class="status-mask" mode="widthFix"></image>
			<image src="/static/status/order_start_ru.png" v-if="lang=='ru'" class="status-mask" mode="widthFix">
			</image>
		</template>


		<!-- 已合作 合作方不是当前用户 -->
		<template v-else-if="item.release_order.join_user_id != null && item.release_order.join_user_id != user_id">
			<image src="/static/status/order_cancel.png" v-if="lang=='zh'" class="status-mask" mode="widthFix"></image>
			<image src="/static/status/order_cancel_ru.png" v-if="lang=='ru'" class="status-mask" mode="widthFix">
			</image>
		</template>


		<!-- 公司名称 -->
		<view class="index1_images" v-if="item.release_user">

			<u-avatar v-if="item.release_user.avatar.indexOf('uploads')>-1"
				:src="IMAGE_URL+item.release_user.avatar"></u-avatar>
			<u-avatar v-else :src="item.release_user.avatar"></u-avatar>

			<view class="index1_images1">
				<view style="font-size: 28rpx;width: 350rpx;" class="ov">
					{{lang=='zh'?item.release_user.username:item.release_user.username_ru}}
				</view>

				<view class="index1_imagescx2" v-if="item.data&&item.data.port_city">
					{{$t("通关口岸")}} : {{langKey(item.data.port,"city_name")}}
				</view>

				<view v-if="itemIndex==1" class="index1_imagescx2">
					{{lang=='zh'?item.data.category.name:item.data.category.name_ru}}
				</view>


			</view>

			<view class="index1_images3">

				<view class="index1_images4" v-if="item.data.mode">
					{{item.data.mode.split(",").map(item=>this.$t(item)).join(",")}}
				</view>

				<view class="index1_images5" v-if="item.data.whole_diffuse">
					{{lang=='zh'?item.data.whole_diffuse:item.data.whole_diffuse_ru}}
				</view>
			</view>
		</view>

		<view class="need-service" v-if="serviceCount(item.data)">
			<div class="label">{{$t("所需服务")}}({{serviceCount(item.data)}})</div>
			<div class="flex service-list">

				<!-- 
				clearance  1报关 2清关 3清关+报关
				is_express_price 1不显示 2含运输
				is_load_unload  1不显示 2装卸
				is_warehouse 1不显示 2仓储 
				is_transit 1不显示  2转关
				-->

				<div class="item" v-if="item.data.clearance==2||item.data.clearance==3">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("清关")}}
				</div>
				<div class="item" v-if="item.data.clearance==1||item.data.clearance==3">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("报关")}}
				</div>
				<div class="item" v-if="item.data.is_express_price==2">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("运输")}}
				</div>
				<div class="item" v-if="item.data.is_load_unload==2">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("装卸")}}
				</div>
				<div class="item" v-if="item.data.is_warehouse==2">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("仓储")}}
				</div>
				<div class="item" v-if="item.data.is_transit==2">
					<image src="/static/success2.png" mode="widthFix" style="width: 25rpx;"></image>{{$t("转关")}}
				</div>
			</div>
		</view>

		<!-- 订单编号 -->
		<view class="index1_order">
			<!-- 订单号  进行中 -->
			<!-- {{orderStatus(item.data.status)}} -->
			<view
				style="width: 100%;min-height: 22rpx;display: flex;justify-content: space-between;margin-bottom: 33rpx;"
				v-if="item.order&&item.release_order.join_user_id != null && item.release_order.join_user_id == user_id">
				<view style="display: flex;font-size: 22rpx;" :class="{column:lang=='ru'}">
					<span style="margin-right: 15rpx;">{{$t('订单编号')}} :</span>
					<span>{{item.order.order_no}}</span>
				</view>
				<view class="index1_order1">{{orderStatus(item.order.status)}}</view>
			</view>

			<view style="width: 100%;height: 24rpx;display: flex;justify-content: space-between;font-size: 22rpx;">
				<view style="display: flex;" v-if="item.data.departure">
					<image v-if="item.data.departure_country==0" style="width: 40rpx;height: 24rpx;"
						src="@/static/ic0.png" mode=""></image>
					<image v-else style="width: 40rpx;height: 24rpx;" src="@/static/ic1.png" mode=""></image>
					<span style="margin-left: 10rpx;">
						{{item.data.departure_country==0?$t("中国"):$t("俄罗斯")}}
					</span>
				</view>
				<view style="display: flex;align-items: center;height: 24rpx;">
					<image v-if="item.data.reach_country==0" style="width: 40rpx;height: 24rpx;" src="@/static/ic0.png"
						mode=""></image>
					<image v-else style="width: 40rpx;height: 24rpx;" src="@/static/ic1.png" mode=""></image>
					<span style="margin-left: 10rpx;">
						{{item.data.reach_country==0?$t("中国"):$t("俄罗斯")}}
					</span>
				</view>
			</view>
			<view>
				<view style="width: 100%;min-height: 8rpx;background-color: #06C36E;margin-top: 17rpx;"></view>
			</view>

			<view class="address-group">
				<view v-if="item.data.departure&&item.data.departure.mergename" class="address-info">
					{{lang=='zh'?cityReverse(item.data.departure.mergename):cityReverse(item.data.departure.mergename_ru)}}
				</view>
				<view v-else class="address-info">{{$t("不限")}}</view>
				<image style="width: 72rpx;height: 22rpx;margin: 6rpx 14rpx;flex-shrink: 0;" src="@/static/17251x.png"
					mode=""></image>
				<view v-if="item.data.reach&&item.data.reach.mergename" class="address-info text-right">
					{{lang=='zh'?cityReverse(item.data.reach.mergename):cityReverse(item.data.reach.mergename_ru)}}
				</view>
				<view v-else class="address-info text-right">{{$t("不限")}}</view>
			</view>

		</view>
		<!-- 货物信息 -->
		<view class="index1_goods" v-if="itemIndex==0">
			<view style="width: 100%;min-height: 28rpx;display: flex;justify-content: space-between;">
				<view style="font-size: 28rpx;color: #000000;">{{$t('货物信息')}}</view>
				<view v-if="parseFloat(item.data.margin_price)>0"
					style="margin-left: 10rpx;display: flex;justify-content: flex-end;align-items: flex-end;margin-top: -26rpx;"
					:class="{column:lang=='ru'}">
					<span style="color: #FF0000;font-size: 24rpx;"
						:style="{'text-align':lang=='ru'?'right':'left'}">{{$t('需缴保证金')}} :</span>
					<view style="display: flex;align-items: flex-end;">

						<span
							style="color: #FF0000;font-size: 40rpx;font-weight: bold;margin-left:16rpx;position: relative;top: 10rpx;">
							{{item.data.margin_price}}

						</span>
						<span style="font-size: 24rpx;color:#FF0000;flex-shrink: 0;">/{{$t("元")}}</span>
					</view>
				</view>
			</view>
			<view class="index1_goods1">{{$t('货物名称')}}</view>
			<view style="color: #000000;font-size: 28rpx;font-weight: normal;margin-top: 12rpx;" class="max-line-2">
				{{lang=='zh'?item.data.goods_name:item.data.goods_name_ru}}
			</view>
			<view class="index1_goods2">
				<view class="index1_goods2_block1">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('大概总体积')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						<text
							v-if="item.data.goods_volume">{{lang=='zh'?item.data.goods_volume:item.data.goods_volume_ru}}</text>
						<text v-else>0</text>m³
					</view>
				</view>
				<view class="index1_goods2_block1">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('大概总重量')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						<span>
							<text
								v-if="item.data.goods_weight">{{lang=='zh'?item.data.goods_weight:item.data.goods_weight_ru}}</text>
							<text v-else>0</text>
						</span>
						<span style="font-size: 22rpx;">kg</span>
					</view>
				</view>
				<view class="index1_goods2_block">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('货物总数量')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						<text v-if="item.data.goods_num">
							{{lang=='zh'?item.data.goods_num:item.data.goods_num_ru}}
						</text>
						<text v-else>0</text>
						{{$t('个')}}
					</view>
				</view>
			</view>
		</view>
		<!-- 车源信息 -->
		<view class="index1_goods" v-if="itemIndex==1 ">
			<view style="width: 100%;min-height: 28rpx;display: flex;justify-content: space-between;">
				<view style="font-size: 28rpx;color: #1d1d1d;">{{$t('有车求货')}}</view>
				<view style="margin-left: 10rpx;text-align: end;" v-if="item.data.desire_price!=0">
					<span style="color: #FF0000;font-size: 24rpx;">{{$t('期待运费总价')}} :</span>
					<span style="color: #FF0000;font-size: 28rpx;font-weight: bold;margin-left: 10rpx;">
						{{item.data.desire_price}}
					</span>
					<span style="color: #FF0000;font-size: 24rpx;">{{$t(item.data.price_unit)}}</span>
				</view>
			</view>
			<view style="width: 100%;display: flex;">
				<view v-if="item.release_user&&item.release_user.mobile">
					<view class="index1_goods1">{{$t('联系电话')}}</view>
					<view style="color: #000000;font-size: 28rpx;font-weight: normal;margin-top: 12rpx;">
						{{item.release_user.mobile}}
					</view>
				</view>
				<view style="margin-left: 80rpx;" v-if="item.data&&item.data.give_install_date">
					<view class="index1_goods1">{{$t('接货时间')}}</view>
					<view style="color: #000000;font-size: 28rpx;font-weight: normal;margin-top: 12rpx;">
						{{item.data.give_install_date}}
					</view>
				</view>
			</view>


			<view class="index1_goods2">
				<view class="index1_goods2_block1">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('大概总体积')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						<text
							v-if="item.data.goods_volume">{{lang=='zh'?item.data.goods_volume:item.data.goods_volume_ru}}</text>
						<text v-else>0</text>m³
					</view>
				</view>
				<view class="index1_goods2_block1">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('大概总重量')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						<span>
							<text
								v-if="item.data.load_num">{{lang=='zh'?item.data.load_num:item.data.load_num_ru}}</text>
							<text v-else>0</text>
						</span>
						<span style="font-size: 22rpx;">kg</span>
					</view>
				</view>
				<view class="index1_goods2_block1">
					<view style="font-size: 22rpx;color: #999999;min-height: 30rpx;">{{$t('运输速度')}}</view>
					<view style="font-size: 28rpx;color: #000000;margin-top: 20rpx;">
						{{item.data.desire_speed}}
						{{$t('天')}}
					</view>
				</view>
			</view>
		</view>
		<view class="index1_xq4">
			<view class="index_xq1" @click.stop="handeleUninterested()">{{$t('不感兴趣')}}</view>
			<view class="index_xq2" v-if="item.release_order.join_user_id == user_id" @click.stop="handeleOrder(item)">
				{{$t('查看订单')}}
			</view>
			<view class="index_xq2" v-else @click.stop="handeleDetail2(item)">{{$t('参与竞标')}}</view>
			<view class="index_xq3" @click.stop="handeleCommunicate(item)">{{$t('即时沟通')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_PIC,
		IMAGE_URL
	} from '@/config/app';
	export default {
		props: ["item", "itemIndex", "index"],
		data() {
			return {
				IMAGE_PIC,
				IMAGE_URL,
				lang: uni.getStorageSync("lang"),
				user_id: uni.getStorageSync("user_id")
			}
		},
		created() {},
		methods: {
			//国家、省份、城市 颠倒
			cityReverse(str) {
				return str.split(",").reverse().join(",");
			},
			serviceCount(item) {
				let count = 0;
				if (item.clearance == 1) count++
				else if (item.clearance == 2) count++
				else if (item.clearance == 3) count += 2

				if (item.is_express_price == 2) count++
				if (item.is_load_unload == 2) count++
				if (item.is_warehouse == 2) count++
				if (item.is_transit == 2) count++

				// clearance 1报关 2清关 3清关+报关
				// is_express_price 1不显示 2含运输
				// is_load_unload  1不显示 2装卸
				// is_warehouse 1不显示 2仓储 
				// is_transit 1不显示 2转关 
				return count
			},
			// 跳转至详情
			handeleDetail(item) {
				// 不允许跳转逻辑

				//已合作 合作方不是当前用户  
				if (item.release_order.join_user_id != null && item.release_order.join_user_id != this.user_id) return
				//订单已失效 
				if (item.release_order.status == 3 || item.release_order.is_deleted > 0) return

				uni.navigateTo({
					url: item.path + (item.release_order.join_user_id != null ? '&flag=1' : '')

				})
			},
			// 跳转至详情
			handeleDetail2(item) {
				// 不允许跳转逻辑

				//已合作 合作方不是当前用户  
				if (item.release_order.join_user_id != null && item.release_order.join_user_id != this.user_id) return
				//订单已失效 
				if (item.release_order.status == 3 || item.release_order.is_deleted > 0) return
				let str = "";
				//小件快递 transport
				if (item.data.release_type == 3 && item.data.human_type == 1) {
					str = "transport"
				}
				//车源->有车求货 transport
				else if (this.itemIndex == 1) {
					str = "transport"
				}
				//货源->货代 crossborder
				else {
					str = "crossborder"
				}
				uni.navigateTo({
					url: `/pages/order/process/buildOrder?type=${str}&release_id=${item.data.id}`
				})
			},

			handeleOrder(item) {
				console.log(JSON.parse(JSON.stringify(item)))

				uni.navigateTo({
					url: `/pages/ordering/orderDetail?id=${item.release_order.id}&join_order_id=${item.release_order.join_order_id}&status=${item.release_order.status}&isDetail=true`
				})
			},
			handeleUninterested() {
				this.$emit("handeleUninterested", this.item, this.index)
			},
			handeleCommunicate() {
				this.$emit("handeleCommunicate", this.item)
			},
			orderStatus(key) {
				return {
					0: this.$t('待参与'),
					1: this.$t('已参与'),
					2: this.$t('进行中(已合作)'),
					3: this.$t('已取消/已关闭'),
					4: this.$t('申请售后'),
					5: this.$t('售后已退款'),
					6: this.$t('发布方确认收货(进行中)'),
					7: this.$t('已评价'),
					8: this.$t('同意延期付款(已完成)'),
					9: this.$t('未付款(不同意延期)'),
					10: this.$t('已完成'),
					11: this.$t('待开始'),
				} [parseInt(key)] || ''
			}
		}
	}
</script>

<style lang="scss">
	.address-group {
		width: 100%;
		display: flex;
		min-height: 22rpx;
		align-items: flex-start;
		font-size: 22rpx;
		margin-top: 21rpx;
	}

	.max-line-2 {
		line-height: 40rpx;
		max-height: 40*2rpx;
		overflow: hidden;
	}

	.address-info {
		width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.Currently-unavailable {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.textBlock {
		font-size: 26rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
	}

	.textBlock_ru1 {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;
		margin-bottom: -18rpx;
	}

	.ov {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap
	}

	.textBlock_ru {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;

	}

	.item-buts {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60px;
		background: #5282E6;
		box-shadow: 0px 3.97px 9.92px 0px rgba(0, 76, 255, 0.3);
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.item-buts-active {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60px;
		font-size: 24rpx;
		color: #000000;
		text-align: center;
		line-height: 60rpx;
	}

	.index1_hycy {
		z-index: 2;
		width: 690rpx;
		height: 80rpx;
		border-radius: 80px;
		background: #FFFFFF;
		padding: 10rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 28rpx;
		margin-bottom: 24rpx;
	}

	.index1_tjzy {
		color: #FFFFFF;
		z-index: 2;
		margin-top: 40rpx;
		width: 690rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index1_ck_flex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.index1_ck_imgblock {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		border-radius: 16rpx;

		background: rgba(255, 255, 255, 0.5);

		backdrop-filter: blur(10px);
		box-shadow: 0px 7px 8px 0px rgba(82, 130, 230, 0.5);
	}

	.index1_ck {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 2;
		margin-top: 50rpx;
		width: 690rpx;
		height: 174rpx;
		border-radius: 32rpx;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
	}

	.list_block {
		width: 690rpx;
		height: calc(100vh - 610rpx);
	}

	.scroll-Y {
		width: 690rpx;
		height: 100%
	}

	.index1_myyunshu {
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}

	.yunshu_images1 {
		width: 345rpx;
		height: 185rpx;
		position: relative;
		left: -13rpx;
		top: -10rpx;
	}

	.yunshu_images2 {
		width: 314rpx;
		height: 158rpx;
		position: relative;
		left: 0;
		top: 0rpx;
	}

	.index1_message {
		width: 690rpx;
		display: flex;
		align-items: center;
		z-index: 2;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		letter-spacing: 3rpx;
	}

	.index1_yunshu1 {
		width: 314rpx;
		height: 158rpx;
		border-radius: 24rpx;
		position: relative;
	}

	.index1_yunshu {
		width: 690rpx;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
		margin-top: 50rpx;
	}

	.index1_headers1 {
		flex: 1;
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 16rpx;
	}

	.index1_headers {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-top: 84rpx;
		z-index: 2;
	}

	.header {
		width: 750rpx;
		height: 792rpx;

	}

	.index1_goods2_block {
		min-height: 66rpx;
		width: 169rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2_block1 {
		min-height: 66rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2 {
		width: 100%;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.index1_goods1 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 22rpx;
	}

	.index1_xq4 {
		position: absolute;
		bottom: -24rpx;
		left: 30rpx;
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
	}

	.index_xq1 {
		width: 196rpx;
		height: 60rpx;
		background: #FF5D5D;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index_xq2 {
		width: 196rpx;
		height: 60rpx;
		background: #5282E6;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index_xq3 {
		width: 196rpx;
		height: 60rpx;
		background: #06C36E;
		border-radius: 60rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.index1_goods {
		width: 630rpx;
		min-height: 240rpx;
		background: #F6F7FB;
		border-radius: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.index1_order1 {
		height: 30rpx;
		border-radius: 22rpx;
		padding: 0 16rpx;
		background: #F32929;
		color: #FFFFFF;
		font-size: 22rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 30rpx;
	}

	.index1_order {
		width: 630rpx;
		min-height: 100rpx;
		border-radius: 32rpx;
		padding: 30rpx 30rpx 17rpx 30rpx;
		box-sizing: border-box;
		background: #F6F7FB;
		margin-top: 30rpx;

	}

	.index1_images5 {
		min-width: 118rpx;
		height: 40rpx;
		background: #06C36E;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;

	}

	.index1_images4 {
		max-width: 200rpx;
		white-space: nowrap;
		min-width: 118rpx;
		height: 40rpx;
		overflow: auto;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;
	}

	.index1_images3 {
		width: 205rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.index1_imagescx2 {
		border-radius: 31rpx;
		font-size: 22rpx;
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		line-height: 31rpx;
		max-width: 300rpx;
		text-align: left;
		border-radius: 5rpx;
		margin-right: 8rpx;
		background-color: #FF5D5D;
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
	}

	.index1_images1 {
		width: 319rpx;
		min-height: 100rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}

	.index1_images {
		width: 100%;
		min-height: 100rpx;
		display: flex;
		align-items: center;
	}

	.index1_block {
		width: 690rpx;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 54rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		margin-bottom: 70rpx;
	}

	.status-mask {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		border-radius: 50%;
		z-index: 99;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.need-service {
		width: 100%;
		background-color: #FEF0DE;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
	}

	.need-service .label {
		color: #FF6701;
		font-weight: bold;
		flex-shrink: 0;
		max-width: 200rpx;
	}

	.service-list {
		width: 100%;
		flex-wrap: nowrap;
		display: flex;
		margin-left: 20rpx;
		overflow: auto;

		.item {
			color: #F6A132;
			margin-right: 24rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			max-width: 200rpx;

			image {
				margin-top: 5rpx;
				margin-right: 14rpx;
				flex-shrink: 0;
			}
		}
	}
</style>